<template>
  <div>
    <!-- begin头部信息 已登录-->
    <div class="index-userinfo" v-if="isLogin">
      <div class="index-userinfo_head">
        <div class="index-userinfo_head_l">
          <img class="index-userinfo_img" :src="customer.headurl"/>
          <div class="index-userinfo_txt">
            <div class="index-userinfo_nickname">{{customer.nickname}}</div>
            <div class="index-userinfo_jf">积分：{{customer.integral}}</div>
          </div>
        </div>
        <div class="index-userinfo_head_r">
        </div>
      </div>

      <div class="index-userinfo_cash">
        <div class="index-userinfo_l">
          <div class="index-userinfo_txt" style="margin-left: 0;">余额（元）</div>
          <div class="index-userinfo_money">{{customer.amount | regexMoney}}</div>
        </div>
        <div class="index-userinfo_r">
          <div class="index-userinfo_btn" @click="goCharge();">充值</div>
        </div>

      </div>
    </div>
    <!-- end头部信息 已登录-->

    <!-- begin头部信息 未登录-->
    <div class="index-userinfo" v-if="!isLogin">
      <div class="index-userinfo_head">
        <div class="index-userinfo_head_l">
          <div style="display: flex;align-items: center;width: 0.8rem;height: 0.8rem;border: 1px solid #fff;border-radius: 100%;justify-content: center;">
            <img style="width: 0.4rem;height: 0.4rem;" class="index-userinfo_img" src="../../assets/img/default_user.png"/>
          </div>
          <div class="index-userinfo_txt">
            <div class="index-userinfo_nickname">未登录</div>
            <div class="index-userinfo_jf">积分：0</div>
          </div>
        </div>
        <div class="index-userinfo_head_r">
        </div>
      </div>

      <div class="index-userinfo_cash">
        <div class="index-userinfo_l">
          <div class="index-userinfo_txt" style="margin-left: 0;">余额（元）</div>
          <div class="index-userinfo_money">0.00</div>
        </div>
        <div class="index-userinfo_r">
          <div class="index-userinfo_btn" @click="goLogin();">去登录</div>
        </div>

      </div>
    </div>
    <!-- end头部信息 未登录-->

    <van-row class="user-links">
      <van-col span="6" >
        <div @click="goUrl('/orderList?status=1');">
          <van-icon name="pending-payment"/>
          待发货
        </div>

      </van-col>
      <van-col span="6">
        <div @click="goUrl('/orderList?status=2');">
          <van-icon name="logistics" />
          已发货
        </div>
      </van-col>
      <van-col span="6">
        <div @click="goUrl('/orderList?status=3');">
          <van-icon name="paid" />
          已完成
        </div>
      </van-col>

      <van-col span="6">
        <div @click="goUrl('/orderList?status=5');">
          <van-icon name="refund-o" />
          换货
        </div>
      </van-col>

    </van-row>

    <van-cell-group class="user-group">
      <van-cell  @click="goUrl('/orderList');" icon="orders-o" title="全部订单" is-link />
    </van-cell-group>

    <van-cell-group>
      <van-cell @click="goUrl('/prizeList');" icon="gift-o" title="我的奖品" is-link />
      <van-cell @click="goUrl('/jfGoods');" icon="points" title="积分兑换" is-link />
      <van-cell @click="goFavList();" icon="like-o" title="我的收藏" is-link />
    </van-cell-group>

    <van-tabbar v-model="active">
      <van-tabbar-item name="home" @click="goHome();" icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item name="user" @click="goUrl('/user');"  icon="contact">个人中心</van-tabbar-item>
      <van-tabbar-item name="cart" @click="goUrl('/kefu');" icon="chat-o">联系客服</van-tabbar-item>
    </van-tabbar>

    <reCharge v-if="showRecharge" :amount="amount" @close="showRecharge = false;"></reCharge>
  </div>
</template>

<script>
  import { Row, Col, Icon, Cell, CellGroup } from 'vant';
  import customerService from '../../api/customerService';
  import reCharge from '../commonComponents/reCharge';
  export default {
    name:'user',
    components: {
      reCharge
    },
    data(){
      return {
        isLogin:false,
        amount:'',
        showRecharge:false,
        active:'user',
        customer:{}
      }
    },
    components: {
      reCharge,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup
    },
    methods:{
      goFavList(){
        var url = window.location.origin + window.location.pathname+'?vt='+new Date().getTime() + '#/myFavList';
        window.location.href = url;
      },
      goHome() {
        var url = window.location.origin + window.location.pathname+'?vt='+new Date().getTime() + '#/index?auth=1';
        window.location.href = url;
      },
      goLogin(){
        window.document.getElementById('login_timeout_id').style.display='block';
      },
      goCharge(){
        this.showRecharge = true;
      },
      getCustomerInfo(){
        customerService.getCustomerInfo({noshowLoginDailog:true}).then((rsp)=>{
          if(rsp.result) {
            this.isLogin = true;
            this.customer = rsp.obj;
            this.amount = rsp.obj.amount;
          }else {
            if(rsp.errorCode != '101') {
              this.$toast(rsp.errorMsg);
            }
          }
        }).catch((error)=>{
            this.$toast('getCustomerInfo接口异常'+error);
        });
      },
      goUrl(url) {
        this.$nocacheRouter(url);
      },
    },
    mounted(){
      this.getCustomerInfo();
    }
  };
</script>

<style scoped>

  .index-userinfo {
    background: #ff2741;
    display: flex;
    flex-direction: column;
    position: relative;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
  }
  .index-userinfo_nickname {
    color: #fff;
    font-size: 12px;
  }
  .index-userinfo_head_r button {
    background: #ff2741;
    color: #ffc30e;
    border: 1px solid #ffc30e;
    line-height: 1.6;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .index-userinfo_head {
    display: flex;
    align-items:center;
    justify-content: space-between;
    height: 1.2rem;
  }
  .index-userinfo_txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin-left: 10px;

  }
  .index-userinfo_head_l {
    display: flex;
  }

  .index-userinfo_img {
    height: 0.80rem;
    width: 0.80rem;
    border-radius: 100%;
  }

  .index-userinfo_jf {
    padding-right: 0.40rem;
    color: #fffffe;
    font-size: 12px;
    opacity: 0.6;
  }

  .index-userinfo_cash {
    flex-grow: 1;
    width: 100%;
    height: 1.80rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    align-items: center;
    margin-bottom: 0.20rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
  }
  .index-userinfo_l {
    padding-left: 15px;
  }
  .index-userinfo_btn {
    background: #ff2741;
    font-size: 15px;
    height: 0.70rem;
    line-height: 0.70rem;
    padding-left: 0.50rem;
    padding-right: 0.50rem;
    border-radius: 0.35rem 0.35rem 0.35rem 0.35rem;
    margin-right: 0.40rem;
  }
  .index-userinfo_txt {
    font-size: 12px;
    color: #999999;
  }
  .index-userinfo_money {
    font-size: 30px;
    color: #ff2741;
  }


  .user-group {
     margin-bottom: 15px;
   }
  .user-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
  }

  .van-icon {
    display: block;
    font-size: 24px;
  }

</style>
